<template>
    <div v-loading="loading" style="margin: 10px;">
        <div :class="{card: index > 0}" v-for="(task,index) in tasks" :key="task.signInstanceWid" @click="getDetail(task.signWid, task.signInstanceWid,task.rateSignDate)">
            <el-card body-style="padding: 10px" >
                <el-row type="flex" >
                    <el-col :span="24">
                        <div>
                            <el-button size="mini" icon="el-icon-position" type="warning">其他</el-button>
                            <el-button v-if="task.signRate === '1'" size="mini" icon="el-icon-refresh" type="success">循环</el-button>
                            <div style="float: right;font-size: 13px">
                                <span v-if="task.signStatus === '1'" style="color: #76D592;">已签到(<span v-if="task.isMalposition === '1'" style="color: #F2A946">范围外签到</span>) ></span>
                                <span v-else style="color: #F2A946">未签到 ></span>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <el-row type="flex">
                    <el-col :span="24">
                        <div style="margin: 5px 0 5px 0"><span>{{ task.taskName }}</span></div>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="left">
                    <el-col style="width: 100px">
                        <div><span class="title-font">创建人</span></div>
                    </el-col>
                    <el-col>
                        <span class="title-font description">
                            {{ task.senderUserName }}
                        </span>
                    </el-col>
                </el-row>

                <el-row v-if="task.signRate === '1'" type="flex" justify="left">
                    <el-col style="width: 100px">
                        <span class="title-font">签到日</span> 
                    </el-col>
                    <el-col>
                        <span class="title-font description">
                            {{ task.rateSignDate }}
                        </span>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="left">
                    <el-col style="width: 100px">
                        <span class="title-font">签到时间段</span> 
                    </el-col>
                    <el-col >
                        <span v-if="task.signRate === '1'" class="title-font description">{{ task.rateTaskBeginTime }} ~ {{ task.rateTaskEndTime }}</span>
                        <span v-else class="title-font description">{{ task.singleTaskBeginTime }} ~ {{ task.singleTaskEndTime }}</span>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getStuSignInfosInOneDay } from "@/api/user";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
    loading: true,
    tasks: [],
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    getDetail(signWid, signInstanceWid,rateSignDate){
        console.log(signWid,signInstanceWid,rateSignDate)
        let wind = {signWid, signInstanceWid};
        this.$bus.$emit("getDetailSignInstance",wind,rateSignDate);
        this.$store.dispatch('user/setWind',wind);
    },
    getStuSignInfosInOneDay(){
        getStuSignInfosInOneDay()
        .then((result) => {
            console.log(result)
            if(result.code === "0" && result.datas !== undefined){
                let signedTasks = result.datas.signedTasks;
                let unSignedTasks = result.datas.unSignedTasks;
                console.log(signedTasks,unSignedTasks)
                this.tasks = result.datas.signedTasks.concat(result.datas.unSignedTasks)
                this.loading = false;
            }
            
        }).catch((err) => {
            this.$tips(err.message,"error");
        });
    },
},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
    this.getStuSignInfosInOneDay();
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.card{
    margin-top: 10px;
}
.title-font{
    font-size: 13px;
    color: #A0A7B3;
}
.description{
    color: #6B7482;
}
.el-button--mini {
    padding: 2px 3px;
    font-size: 12px;
    border-radius: 3px;
}
.el-button--warning {
    color: #FFFFFF;
    background-color: #BDA46E;
    border-color: #BDA46E;
}
.el-button--success {
    color: #FFFFFF;
    background-color: #8DD5A9;
    border-color: #8DD5A9;
}
</style>